<template>
	<!--pages/message/index.wxml-->

	<view class="message">
		<view class="example-search" @click="showDatePicker = true">
			<fui-input placeholder="日期" readonly v-model="date" @click="showDatePicker = true"></fui-input>
		</view>
		<view class="daily">
			<text class="daily-date">{{date}} 服务台日报</text>
			<text class="daily-time">{{week}}</text>
			<view class="daily-info">
				<text class="daily-info-label">服务台人员:{{detailData.userName}}</text>
				<text class="daily-info-label">今日电话总数:{{count}}</text>
				<fui-row class="daily-info-label" v-for="(item,index) in detailData.orderCount">
					<fui-col :span="12">
						<text>{{type[item.type]}}数: {{item.count}}</text>
					</fui-col>

				</fui-row>
				<!-- 	<fui-row class="daily-info-label">
					<fui-col :span="12">
						<text>已接: 120</text>
					</fui-col>
					<fui-col :span="12">
						<text>未接: 120</text>
					</fui-col>
				</fui-row>
				<fui-row class="daily-info-label">
					<fui-col :span="12">
						<text>建单数: 120</text>
					</fui-col>
					<fui-col :span="12">
						<text>服务台解决: 120</text>
					</fui-col>
				</fui-row>
				<fui-row class="daily-info-label">
					<fui-col :span="12">
						<text>电话找人: 120</text>
					</fui-col>
					<fui-col :span="12">
						<text>无效电话: 120</text>
					</fui-col>
				</fui-row>
				<fui-row class="daily-info-label">
					<fui-col :span="12">
						<text>未建单: 120</text>
					</fui-col>
				</fui-row> -->
			</view>
			<fui-row class="daily-info-detail" @click="jumpToDailyDetail">
				<fui-col :span="12">
					<text class="daily-info-detail-text">详情</text>
				</fui-col>
				<fui-col :span="12" class="to">
					<fui-icon size="32rpx" name="arrowright" color="rgba(0,0,0,0.4)"></fui-icon>
				</fui-col>
			</fui-row>
		</view>
		<fui-date-picker :show="showDatePicker" type="3" @change="change" @cancel="cancel"></fui-date-picker>
	</view>

</template>

<script>
	import {
		HomeApi
	} from '../../../../api/home'
	import {
		SubPages
	} from '../../../../config/router-config'
	const dateFormat = 'YYYY-MM-DD'
	import dayjs from "dayjs"
	import _ from 'lodash'
	import {
		useAuthStore
	} from '../../../../store/modules/auth'
	import {
		mapGetters
	} from 'pinia'
	export default {
		data() {
			return {
				date: '',
				showDatePicker: false,
				detailData: {},
				type: {
					'1': '未接',
					'2': '已接 ',
					'3': '未建 ',
					'4': '已建 ',
					'5': '未派 ',
					'6': '已派 ',
					'7': '电话找人 ',
					'8': '电话解决 ',
					'9': '无效电话',
				}


			}
		},
		computed: {
			...mapGetters(useAuthStore, ['isLogin']),
			week() {
				var d = dayjs(this.date).day()
				var week = ['日', '一', '二', '三', '四', '五', '六']
				return '星期' + week[d]
			},
			count() {
				let c = _.map(this.detailData?.orderCount, 'count')
				return _.sum(c)
			},


		},
		mounted() {
			this.init()
		},
		methods: {
			change(e) {
				this.showDatePicker = false
				this.date = e.result
				this.init()
			},
			cancel() {
				this.showDatePicker = false
			},
			// 跳转到详情
			jumpToDailyDetail() {
				console.log(this.isLogin);
				if (this.isLogin) {

					wx.navigateTo({
						url: SubPages.DAILY.router
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '暂未登录,是否去登录',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: MainPages.LOGIN.router
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}

						}
					})

				}
			},
			async init() {

				this.date = dayjs().format(dateFormat)

				await HomeApi.dailyCount(this.date)
			}
		}
	}
</script>

<style scoped lang="scss">
	.message {
		// padding: 30rpx;
	}

	.example-search {
		background-color: #fff;
		// padding: 16rpx 32rpx;
		border-radius: 16rpx;
	}

	.daily {
		margin-top: 32rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;

		&-date {
			font-size: 32rpx;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.9);
			display: block;
		}

		&-time {
			display: block;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.4);
			margin-top: 16rpx;
		}

		&-info {
			margin-top: 64rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.6);

			&-label {
				display: block;
				margin-top: 16rpx;
			}

			&-detail {
				margin-top: 64rpx;
				display: flex;
				align-items: center;

				&-text {
					font-size: 28rpx;
					font-weight: 400;
					color: #0052d9;
				}
			}
		}
	}

	.to {
		display: flex;
		justify-content: flex-end;
	}
</style>